<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    v-if 与 v-for 优先级问题

      Vue2: v-for > v-if
      Vue3: v-if  > v-for

    不管是Vue2还是Vue3都不建议将 v-if 与 v-for 同时使用在一个元素上。
      Vue2 会有性能问题，数据量大，满足条件的数据量小时就能有所体现。
      Vue3 会直接出问题

      不推荐的话，如何玩呢？可以采用计算属性先将满足条件的数据给算出来，然后模板中直接循环该计算属性数据。

   -->

    <div id="app">
      <ul>
        <!-- 
          下面的代码，在Vue2可以正常运行，Vue3会报错
         -->
        <li v-for="item in gt2List">{{item}}</li>
      </ul>
    </div>

    <!-- <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      new Vue({
        data() {
          return {
            list: [1, 2, 3, 4],
          };
        },
      }).$mount("#app");
    </script> -->

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            list: [1, 2, 3, 4],
          };
        },

        computed: {
          gt2List() {
            return this.list.filter((item) => item > 2);
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
